//
Vue.filter('improve', function (value) {
    return "￥" + value.toFixed(2)
})


let app = new Vue({
    el: "#app",
    data: {
        msg: "hello",
        books: [
            {
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85,
                count: 1

            },
            {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59,
                count: 1

            },
            {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39,
                count: 1

            },
            {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128,
                count: 1

            }
        ]
    },
    methods: {
        increase(index) {
            this.books[index].count++
        },
        decrease(index) {
            this.books[index].count--
        },
        remove(index) {
            // this.books.pop()
            this.books.splice(index, 1)
        },
        showPrice(price) {
            return "￥" + price.toFixed(2)
        }
    },
    computed: {
        totalPrice() {
            // let totalPrice = 0
            // for (const item of this.books) { //通过for循环实现的
            //     totalPrice += item.price * item.count
            // }
            // return totalPrice
            return this.books.reduce(function(preValue,n){
               return preValue + n.price * n.count
            },0)
        }
    },
    filters: {
        //组件的选项中定义本地的过滤器
        improvePrice: function (value) {//键值对
            return "￥" + value.toFixed(2)
        }
    }
})



// js的三个高级函数，
// 命令式编程：使用js原生开发或Jquery操作DOM来完成数据的更改
// 声明式编程：通过Vue，react angualr ，底层框架编辑好了，我们只需要声明一下就能完成DOM操作

// 编程范式
// 面向对象与面向过程
// 面向过程 操作的是函数


// filter/map/reduce 
// 所需要的参数是上一次的结果

const nums = [10, 20, 111, 222, 444, 40, 50]


// //1. 取出小于100的数
// let newNums = []
// for (const n of nums) {
//     if (n < 100) {
//         newNums.push(n)
//     }
// }
// console.log(newNums);

// //2. 把（1）中新的数组所有的小于100的数字全部乘以2
// let newNewNums = []
// for (const n of newNums) {
//     newNewNums.push(n * 2)
// }

// console.log(newNewNums);

// //3. 把（2）所有乘以2的数字相加，得到最终结果
// let total = 0
// for (const n of newNewNums) {
//     total += n
// }

// console.log(total);

//1. filter 函数的使用
let newNums = nums.filter(function (n) {
    //参数为回调函数，每次回调这个函数，比如数组长度7，函数就会调用7次，第一次进来的是10，第二次进来就是20
    //filter函数回调函数必须返回布尔值，返回true，加入到新数组中，返回false，则会过滤掉。
    return n < 100
})

console.log(newNums);

//2. map函数的使用
// 对数组中每个有内容进行操作
let newNewNums = newNums.map(function (n) {
    return n * 2
})

console.log(newNewNums);

//3. reduce 函数，第一个参数为回调函数，第二个参数为默认的初始值
// reduce的作用对数组中所有内容进行汇总
//参数一：匿名回调函数
//参数二：默认初始值 一般填0
let newNewNewNums = newNewNums.reduce(function (preValue, n) {
    // preValue 指代 上一次返回的值
    // n 是 本次传进来的值
    return preValue + n
}, 0)

// 第一次preValue 的值是默认的初始值0， n 是第一个值
// 第二次preValue 的值是 上一次return回来的值， n 是第二个值
console.log(newNewNewNums);

let total = nums.filter(function (n) {
    return n < 100
}).map(function (n) {
    return n * 2
}).reduce(function (preValue, n) {
    return preValue + n
}, 0)

console.log(total);

let totals = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0)
console.log(totals);

// 函数式编程